<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据总览</title>
    <script src="../static/js/axios.js"></script>
    <script src="../static/js/echarts.min.js"></script>
    <link rel="stylesheet" href="../static/css/layui.css">
    <style>
        body {
            text-align: center;
        }
    </style>
</head>
<body>
<div class="layui-container">
    <div class="layui-row">
        <div id="bar" class="layui-col-md5" style="height: 800px;">

        </div>
        <div class="layui-col-md1">

        </div>
        <div id="pie" class="layui-col-md6" style="height: 800px;">

        </div>

    </div>
</div>

<script>
    function barinit() {
        let chartDom = document.getElementById('bar');
        let myChart = echarts.init(chartDom);

        let url = 'http://127.0.0.1:5000/api/show/';
        axios.get(url).then(res => {
                let bjg = 0; //不及格
                let jg = 0;//及格
                let lh = 0;//良好
                let yl = 0;//优良
                let yx = 0;//优秀
                function grade_check(course) {
                    if (course == "不及格") {
                        bjg += 1
                    } else if (course == "及格") {
                        jg += 1
                    } else if (course == "良好") {
                        lh += 1
                    } else if (course == "优良") {
                        yl += 1
                    } else if (course == "优秀") {
                        yx += 1
                    }
                }

                let data = res.data.data
                console.log(data)
                for (let i = 0; i < data.length; i++) {
                    let J = data[i].java_grade;
                    let M = data[i].mysql_grade;
                    let P = data[i].python_grade;
                    grade_check(J)
                    grade_check(M)
                     grade_check(P)
                }

                myChart.setOption({
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    title: {
                        text: '全部科目各等级人数',
                        textStyle: {
                            color: 'blue'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        data: ['不及格', '及格', '良好', '优良', '优秀'],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }],
                    yAxis: [{
                        type: 'value'
                    }],
                    series: [{
                        name: '人数',
                        type: 'bar',
                        barWidth: '60%',
                        data: [bjg, jg, lh, yl, yx]
                    }]
                });
            }
        )


    }

    barinit()
</script>


<script>

    function pieinit() {
        let chartDom = document.getElementById('pie');
        let myChart = echarts.init(chartDom);

        let url = 'http://127.0.0.1:5000/api/show/';


        axios.get(url).then(res => {

            let javaData = res.data.sum.sumjava;
            let pythonData = res.data.sum.sumpython;
            let mysqlData = res.data.sum.summysql;

            myChart.setOption({

                tooltip: {
                    trigger: 'item',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    top: 'bottom'
                },
                title: {
                    text: '总成绩占比',
                    textStyle: {
                        color: 'green'
                    }
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: {show: true},
                        dataView: {show: true, readOnly: false},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                series: [
                    {
                        name: '总成绩占比',
                        type: 'pie',
                        radius: [50, 250],
                        center: ['50%', '50%'],
                        roseType: 'area',
                        itemStyle: {
                            borderRadius: 8
                        },
                        data: [
                            {value: javaData, name: 'java'},
                            {value: pythonData, name: 'python'},
                            {value: mysqlData, name: 'mysql'}

                        ]
                    }
                ]
            });
        })


    }

    pieinit()
</script>
</body>
</html>